<!--此页面为布局页面，分为头部的搜索区和功能按钮区及中间的列表区，底部用于放分页-->

<template>
  <div class="list-page-container-root">
    <!--头部容器-->
    <div class="header " v-if="$slots.query || $slots.handel"
         :style="{height:`${($slots.query ? queryFormHeight : 0) + ($slots.handel ? rowBtHeight : 0) + ($slots.query && $slots.handel ? 5 : 0)}px`}">
      <div class="query" :id="queryFormDomId" v-if="$slots.query || $slots.rowHandel">
        <div class="query-form" v-if="$slots.query">
          <slot name="query"></slot>
        </div>
        <div class="row-bt" v-if="$slots.rowHandel">
          <slot name="rowHandel"></slot>
        </div>
      </div>

      <!--该插槽内放新增删除导出等功能-->
      <div class="handel-container" :id="rowBtDomId" v-if="$slots.handel">
        <slot name="handel"></slot>
      </div>
    </div>
    <!--表格容器-->
    <div
        :style="{height:`calc(100% - ${($slots.query || $slots.rowHandel ? queryFormHeight : 0) + ($slots.handel ? rowBtHeight : 0) + ($slots.query || $slots.rowHandel || $slots.handel ? 5 : 0) + (($slots.pageDisplay ? pageDisplayHeight : 0))}px)`}"
        class="table-container">
      <!--该插槽内用于放表格部分-->
      <slot name="table"></slot>
    </div>
    <!--分页容器-->
    <div class="pagination-display" :id="pageDisplayDomId" v-if="$slots.pageDisplay">
      <!--该插槽内用于放分页部分-->
      <slot name="pageDisplay"></slot>
    </div>
  </div>
</template>

<script>
import guid from "@/utils/guid";

export default {
  name: "index",
  data() {
    return {

      queryFormHeight: 0,
      queryFormDomId: `DOM${guid()}`,
      rowBtHeight: 0,
      rowBtDomId: `DOM${guid()}`,
      pageDisplayHeight: 0,
      pageDisplayDomId: `DOM${guid()}`,
    }
  },
  methods: {
    async initQueryDomHeight() {
      const queryFormDomId = this.queryFormDomId;
      const queryFormFiledName = 'queryFormHeight'
      const queryFormHeight = await this.getDomHeightByDomID(queryFormDomId)
      this.setDomHeight(queryFormFiledName, queryFormHeight)

      const rowBtDomId = this.rowBtDomId;
      const rowBtFiledName = 'rowBtHeight'
      const rowBtHeight = await this.getDomHeightByDomID(rowBtDomId)
      this.setDomHeight(rowBtFiledName, rowBtHeight)

      const pageDisplayDomId = this.pageDisplayDomId;
      const pageDisplayFiledName = 'pageDisplayHeight'
      const pageDisplayHeight = await this.getDomHeightByDomID(pageDisplayDomId)
      this.setDomHeight(pageDisplayFiledName, pageDisplayHeight)
    },
    getDomHeightByDomID(domId) {
      let owner = this
      return new Promise((resolve, reject) => {
        owner.$nextTick(() => {
          const dom = document.getElementById(domId)
          let height = dom?.offsetHeight != null ? dom.offsetHeight : 0
          resolve(height)
        })
      })
    },
    setDomHeight(filedName, height) {
      this[filedName] = height
    }
  },
  mounted() {
    this.initQueryDomHeight()
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.list-page-container-root {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .header, .table-container, .pagination-display {
    width: 100%;
  }

  .header {
    height: 85px;
    margin-bottom: 5px; //设置与下方表格的间距

    .query {
      width: 100%;
      display: flex;

      .query-form {
        flex: 1;
      }

      .row-bt {
        width: max-content;
        height: 100%;
      }

      ::v-deep .el-form-item__label {
        display: none;
      }

      ::v-deep .el-button {
        height: 32px;

        &.el-button--primary {
          background: $bt-color;
          border: none;
        }
      }
    }

    .handel-container{
      display: flex;
      justify-content: flex-end;
    }
  }

  .table-container {
    height: calc(100% - 135px);
  }

  .pagination-display {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    ::v-deep .el-button {
      height: 32px;

      &.el-button--primary {
        background: $bt-color;
        border: none;
      }
    }
  }
}
</style>
